import React, { useState } from 'react';
import { Modal } from 'antd';

function useModal() {
  const [visible, changeVisible] = useState(false);

  const toggleModalVisible = () => {
    changeVisible(!visible);
  };

  return [(
    <Modal
      visible={visible}
      onOk={toggleModalVisible}
      onCancel={toggleModalVisible}
    >
      弹窗内容
      </Modal>
  ), toggleModalVisible];
}

export default function DomHooks() {
  const [modal, getModal] = useModal(); // 这里的GetModal取决于上面返回的内容。就是一个dom和方法。方法对应上面的钩子
  return (
    <div>
      {modal}
      <button onClick={getModal}>打开弹窗</button>
    </div>
  );
}

